<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/admin.css" />
    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts-en.common.js"></script>
</head>
<body class="pear-container">
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-table-tool-temp">
                <div class="layui-table-tool-self">
                    <a href="/Live/exportEvaluateAnalysis?live_id={$live_id}" target="_blank" class="layui-btn  layui-btn-sm layui-btn-primary">导出</a>
                </div>
            </div>
            参加调研总人数：{$total}</br>
            评价分：{$average}</br>
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>问题</th>
                    <th>答案及分析</th>
                    <th>图标</th>
                </tr>
                </thead>
                <tbody>
                {volist name="subject" id="vo" key="keys" }
                <tr>
                    <td>
                        问题{$keys}:{$vo.subject}({$vo.subject_type_name})
                    </td>
                    {if condition="$vo.subject_type neq 3"}
                    <td>
                        {volist name="vo.options" id="val" key="k"}
                        选项{$val.letter}: {$val.title} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择率: {$val.percentage}  &nbsp;&nbsp;{$val.selected_count}人</br>
                        {/volist}
                    </td>
                    <td>
                        <div id="main{$keys}" style="width: 400px;height:250px;"></div>
                        <script>
                            // 基于准备好的dom，初始化echarts实例
                            var myChart{$keys} = echarts.init(document.getElementById('main{$keys}'));
                            var data1 = []; data2 = [];
                            {volist name="vo.options" id="v"}
                            data1.push('{$v.letter}');
                            data2.push('{$v.percentage}');
                            {/volist}
                                    for(var i in data2){
                                        data2[i] = data2[i].replace('%','');
                                    }
                                    data1.reverse();
                                    data2.reverse();
                                    option = {

                                        title: {
                                            text: '选择率',
                                            //subtext: '数据来自测试'
                                        },
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {
                                                type: 'shadow'
                                            }
                                        },

                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                        },
                                        xAxis: {
                                            max:120,
                                            type: 'value',
                                            boundaryGap: [0, 0.01],
                                            splitLine:{
                                                show:false
                                            }
                                        },
                                        yAxis: {
                                            type: 'category',
                                            data: data1,
                                            splitLine:{
                                                show:false
                                            }
                                        },
                                        series: [
                                            {
                                                type: 'bar',
                                                data: data2,
                                                label: {
                                                    normal: {
                                                        show: true,
                                                        position: 'right',
                                                        formatter:'{c}%'
                                                    }
                                                },
                                                itemStyle: {
                                                    //通常情况下：
                                                    normal:{
                                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                                        color: function (params){
                                                            return "#FF8247";
                                                            //var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                                                            //return colorList[params.dataIndex];
                                                        }
                                                    }
                                                }
                                            }
                                        ]
                                    };
                                    // 使用刚指定的配置项和数据显示图表。
                                    myChart{$keys}.setOption(option);
                        </script>
                    </td>
                    {else/}
                    <td>
                        {$vo.answer|raw}
                    </td>
                    {/if}
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="/static/common/jquery-3.6.0.min.js"></script>
<script src="/static/pear/component/layui/layui.js"></script>
<script>

</script>
</body>
</html>